import Taro, { Component } from '@tarojs/taro'
import './index.scss'
import { View, Text, Image,ScrollView } from '@tarojs/components'
import { parsePrice } from '@utils/utils'

class List extends Taro.Component {
    product(item) {
        return (
            <View className='show-item'>
                <View className='more-prod-pic'>
                    <Image src={item.pic} className='more-pic' />
                </View>
                <View className='prod-text-right'>
                    <View className='prod-text more'>{item.prodName}</View>
                    <View className='cate-prod-info'>{item.brief}</View>
                    <View className='prod-price more'>
                        <Text className='symbol'>￥</Text> <Text className='big-num'>{parsePrice(item.price)[0]}</Text>
                        <Text className='small-num'>.{parsePrice(item.price)[1]}</Text>
                    </View>
                </View>
            </View>

        )
    }

    productList(list) {

        const itemList = (list.records || []).map(item => {
            return this.product(item);
        })

        return (
            <View>
                {
                    itemList
                }
            </View>
        )
    }

    render() {
        const { list,categoryImg } = this.props
        return (
            <ScrollView
                scrollY
                className='rightcontent'>
                <View className='adver-map'>
                    <View className='item-a'>
                        <Image className='item-a-image' src={categoryImg} mode='widthFix'/>
                    </View>
                </View>
                <View className='cont-item'>
                    {
                        this.productList(list)
                    }
                </View>
            </ScrollView>
        )
    }
}
export default List